import type { WebFontsOptions } from "@unocss/preset-web-fonts";

/** 变量 */
export const vars: Record<string, string> = {
	// 品牌色 / 常规
	"primary-6": "#0057FF",
	// 品牌色 / 悬浮
	"primary-5": "#4080FF",
	// 品牌色 / 点击
	"primary-7": "#0E42D2",
	// 品牌色 / 特殊场景
	"primary-4": "#6AA1FF",
	// 品牌色 / 一般禁用
	"primary-3": "#94BFFF",
	// 品牌色 / 文字禁用
	"primary-2": "#BEDAFF",
	// 品牌色 / 浅色/白底悬浮
	"primary-1": "#e8f3ff",
	// 链接 / 常规
	"link-6": "#0057FF",
	// 链接 / 悬浮
	"link-5": "#4080FF",
	// 链接 / 点击
	"link-7": "#0E42D2",
	// 链接 / 特殊场景
	"link-4": "#6AA1FF",
	// 链接 / 一般禁用
	"link-3": "#94BFFF",
	// 链接 / 文字禁用
	"link-2": "#BEDAFF",
	// 链接 / 浅色/白底悬浮
	"link-1": "#e8f3ff",
	// 错误 / 常规
	"danger-6": "#f53f3f",
	// 错误 / 悬浮
	"danger-5": "#f76560",
	// 错误 / 点击
	"danger-7": "#cb272d",
	// 错误 / 禁用
	"danger-4": "#f98981",
	// 错误 / 一般禁用
	"danger-3": "#fbaca3",
	// 错误 / 文字禁用
	"danger-2": "#fdcdc5",
	// 错误 / 浅色背景
	"danger-1": "#ffece8",
	// 成功 / 常规
	"success-6": "#00B42A",
	// 成功 / 悬浮
	"success-5": "#23c343",
	// 成功 / 点击
	"success-7": "#009a29",
	// 成功 / 特殊场景
	"success-4": "#4cd263",
	// 成功 / 一般禁用
	"success-3": "#7be188",
	// 成功 / 文字禁用
	"success-2": "#aff0b5",
	// 成功 / 浅色背景
	"success-1": "#e8ffea",
	// 警示 / 常规
	"warning-6": "#FF7D00",
	// 警示 / 悬浮
	"warning-5": "#FF9A2E",
	// 警示 / 点击
	"warning-7": "#D25F00",
	// 警示 / 特殊场景
	"warning-4": "#FFB65D",
	// 警示 / 一般禁用
	"warning-3": "#FFCF8B",
	// 警示 / 文字禁用
	"warning-2": "#ffe4ba",
	// 警示 / 浅色背景
	"warning-1": "#fff7e8",
	// 次要 / 警示 / 常规
	"warn-6": "#FFB800",
	// 次要 / 警示 / 悬浮
	"warn-5": "#FFCB2E",
	// 次要 / 警示 / 点击
	"warn-7": "#D29000",
	// 次要 / 警示 / 特殊场景
	"warn-4": "#FFDC5D",
	// 次要 / 警示 / 一般禁用
	"warn-3": "#FFEA8B",
	// 次要 / 警示 / 文字禁用
	"warn-2": "#FFF5BA",
	// 次要 / 警示 / 浅色背景
	"warn-1": "#FFFCE8",
	//边框颜色
	"color-border-1": "var(--color-neutral-2)",
	"color-border-2": "var(--color-neutral-3)",
	"color-border-3": "var(--color-neutral-4)",
	"color-border-4": "var(--color-neutral-6)",
	//圆角大小
	"border-radius-0": "none",
	"border-radius-1": "0.25rem",
	"border-radius-2": "0.5rem",
	"border-radius-3": "0.75rem",
	"border-radius-4": "1rem",
	"border-radius-5": "50%",
	// 浅/禁用
	"color-fill-1": "var(--color-neutral-1)",
	// 中/白底悬浮
	"color-fill-2": "var(--color-neutral-2)",
	// 深/灰底悬浮
	"color-fill-3": "var(--color-neutral-3)",
	"color-fill-4": "var(--color-neutral-4)",

	// 强调/标题
	"color-text-1": "#102353",
	// 次强调/正文
	"color-text-2": "#2b2b2d",
	// 次要信息
	"color-text-3": "#6b7280",
	// 辅助文字-1
	"color-text-4": "#9ca3af",
	// 辅助文字-2
	"color-text-5": "#BFC2C7",
	"color-text-white": "rgba(255, 255, 255)",
	"color-text-black": "rgba(0, 0, 0)",
	// 控件提示
	"color-text-white2": "rgba(255, 255, 255, 0.80)",
	//placeholder
	"color-placeholder-1": "#919091"
};
/** 渐变色 Gradient Colors */
export const gradientColors: Record<string, string> = {
	"gradient-blue-1": "linear-gradient(180deg, rgba(22, 93, 255, 0.06) 0%, rgba(22, 93, 255, 0.00) 100%)",
	"gradient-orange-1": "linear-gradient(180deg, rgba(255, 125, 0, 0.06) 0%, rgba(255, 125, 0, 0.00) 100%)",
	"gradient-green-1": "linear-gradient(180deg, rgba(0, 180, 42, 0.06) 0%, rgba(0, 180, 42, 0.00) 100%)",
	"gradient-red-1": "linear-gradient(180deg, rgba(245, 63, 63, 0.06) 0%, rgba(245, 63, 63, 0.00) 100%)",
	"gradient-yellow-1": "linear-gradient(180deg, rgba(255, 184, 0, 0.06) 0%, rgba(255, 184, 0, 0.00) 100%)",
	"gradient-gray-1": "linear-gradient(180deg, rgba(87, 121, 173, 0.06) 0%, rgba(87, 121, 173, 0.00) 100%))"
};

/** unocss rules 加入 bg-* text-* */
export const unoColorsRules = Object.keys(vars).reduce(
	(pre, cur) => {
		if (cur.startsWith("color-border")) return pre;
		let key = cur;
		if (cur.startsWith("color-text-")) {
			key = cur.replace("color-text", "text");
			const css = { color: vars[cur] };
			pre.push([key, css]);
		} else if (cur.startsWith("color-fill-")) {
			key = cur.replace("color-fill", "fill");
			const bgCss = { "background-color": vars[cur] };

			pre.push([`bg-${key}`, bgCss]);
		} else {
			if (key.endsWith("-6")) key = key.replace("-6", "");
			const textCss = { color: vars[cur] };
			pre.push([`text-${key}`, textCss]);

			const bgCss = { "background-color": vars[cur] };
			pre.push([`bg-${key}`, bgCss]);

			const borderCss = { "border-color": vars[cur] };
			pre.push(
				[`border-color-${key}`, borderCss],
				[`border-l-color-${key}`, { "border-left-color": vars[cur] }],
				[`border-r-color-${key}`, { "border-right-color": vars[cur] }],
				[`border-t-color-${key}`, { "border-top-color": vars[cur] }],
				[`border-b-color-${key}`, { "border-bottom-color": vars[cur] }]
			);
		}
		return pre;
	},
	[] as [string, Record<string, string | number>][]
);

/** unocss rules 加入border radius */
export const borderRadiusRules = Object.entries(vars).reduce(
	(res, [key, value]) => {
		if (key.startsWith("border-radius-")) {
			const index = key.split("-")[2];
			res.push(
				[`border-radius-${index}`, { "border-radius": value }],
				[`border-radius-${index}`, { "border-radius": value }],
				[`border-radius-${index}`, { "border-radius": value }],
				[`border-radius-${index}`, { "border-radius": value }]
			);
		}
		return res;
	},
	[] as [string, Record<string, string | number>][]
);

/** unocss rules 加入border color */
export const borderColorRules = Object.entries(vars).reduce(
	(res, [key, value]) => {
		if (key.startsWith("color-border-")) {
			const index = key.split("-")[2];
			const css = { "border-color": value };
			res.push(
				[`border-color-${index}`, css],
				[`border-l-color-${index}`, { "border-left-color": value }],
				[`border-r-color-${index}`, { "border-right-color": value }],
				[`border-t-color-${index}`, { "border-top-color": value }],
				[`border-b-color-${index}`, { "border-bottom-color": value }]
			);
		}
		return res;
	},
	[] as [string, Record<string, string | number>][]
);

/** unocss rules 加入Gradient Colors */
export const gradientColorsRules = Object.entries(gradientColors).reduce(
	(res, [key, value]) => {
		const css = { background: value };
		res.push([key, css]);
		return res;
	},
	[] as [string, Record<string, string | number>][]
);

export const webFontsOptions: WebFontsOptions = {
	provider: "none",
	fonts: {
		sans: "Inter, sans-serif",
		mono: "JetBrains Mono, monospace"
	}
};
